<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="layui/css/jquery-1.11.3.min.js"></script>
    <style>
    * {
        margin: 0px;
        padding: 0px;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
    }

    p {
        margin-top: 100px;
        margin-left: 0px;
    }
    </style>
</head>

<body>
    <div class="box1" id="box1"></div>
    <p>
        练习：让div环绕窗口一周转圈
    </p>
    <button type="button" id="btn">dongcidaci</button>
</body>
<script type="text/javascript">
$(function() {
    $("#btn").click(function() {
        toRight();
    });
});

function toRight() {
    var w = $(window).width();
    $("#box1").animate({ "left": w - 100 + "px" }, 1000, toDown);
}

function toDown() {
    var h = $(window).height();
    $("#box1").animate({ "top": (h - 100) + "px" }, 1000, toLeft);
}

function toLeft() {
    var w = $(window).width();
    $("#box1").animate({ "left": 0 + "px" }, 1000, toUp);
}

function toUp() {
    var w = $(window).width();
    $("#box1").animate({ "top": 0 + "px" }, 1000);
}
</script>

</html>